<template>
  <view class="container">
    <view class="phone-info">
      已绑定的手机号: {{userinfo.phone}}
    </view>
    <view class="code-input">
      验证码
      <input type="number" name="yzm" class="verification-code-input" v-model="verificationCode" />
      <button type="primary" class="get-code-button" :disabled="isCountingDown" @click="startCountdown">{{countdownText}}</button>
    </view>
    <view class="code-input">
      新密码
		<input class="verification-code-input" v-model="password" :password="showPassword" />
        <icon :class="{'iconfont icon-yanjing_xianshi': !showPassword, 'iconfont icon-yincangbukejian': showPassword}" @click="togglePassword" style="font-size:24px;"></icon>
    </view>
    <view class="next-step">
      <button type="primary" @click="verifyCode">确认修改</button>
    </view>
  </view>
</template>

<script>
// index.js
export default {
  data() {
    return {
      userinfo: { phone: '' },
      verificationCode: '',
      isCountingDown: false,
      countdown: 60,
      password: '',
      showPassword: false,
      countdownText: '获取验证码'
    };
  },
  methods: {
    startCountdown() {
      if (this.isCountingDown) return;
      this.isCountingDown = true;
      let interval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
          this.countdownText = `${this.countdown}秒`;
        } else {
          clearInterval(interval);
          this.isCountingDown = false;
          this.countdownText = '重新获取验证码';
          this.countdown = 60;
        }
      }, 1000);
    },
    verifyCode() {
      if (this.verificationCode === '123456') {
        console.log(this.password);
		wx.reLaunch({
			url:'/pages/index/Login'
		})
      } else {
        uni.showToast({
          title: '验证码错误',
          icon: 'none',
          duration: 2000
        });
      }
    },
    togglePassword() {
		console.log("123")
		if(this.showPassword===true){
			this.showPassword=false
		}else{
			this.showPassword=true
		}
    }
  },
  onShow() {
    const userinfo = uni.getStorageSync('userinfo');
    this.userinfo = userinfo;
    this.userinfo.phone = userinfo.phone.slice(0, 3) + '*'.repeat(userinfo.phone.length - 3 - 4) + userinfo.phone.slice(-4);
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  box-sizing: border-box;
}

.phone-info {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.code-input {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.verification-code-input {
  flex: 1;
  margin-right: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 10rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
}

.get-code-button {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

.next-step button {
  width: 100%;
  margin-top: 20rpx;
}

.code-input {
  position: relative;
  margin-bottom: 10px;
}

.verification-code-input {
  padding-right: 30px; /* 确保有足够的空间放置图标 */
}

.toggle-password {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.uni-icons {
  font-size: 20rpx;
}
</style>